<script setup lang="ts">
import { RouterView } from 'vue-router'
import { ref, onMounted, computed } from 'vue';
import {useCounterStore} from "@/stores/counter"
import Read from '@/http/Readhttp'
const pinia=useCounterStore();
import { useRouter } from 'vue-router';
const router=useRouter();

const loginout=()=>{
  pinia.account.UserName=""
  pinia.account.rid=[]
  pinia.account.departmentId=''
  pinia.account.names=[],
  pinia.account.uid=''
  router.push('/')
}

onMounted(() => {
  CascdeMenuget();
})

const url = ref([{
  "value": "",
  "label": "",
  "path": "",
  "children": [{
    "value": 4,
    "label": "",
    "path": "",
    "children": []
  }]
}])

const CascdeMenuget = () => {
  Read.get('/api/Users/Getcascader', {params:{ParentId: 0, UserId: pinia.account.uid}}).then(res => {
    url.value = res.data.datas
  })
}

const isCollapse = ref(false);

</script>

<template>
  <div class="app-container">
    <el-container>
      <!-- 顶部导航 -->
      <el-header class="main-header">
        <div class="header-content">
          <div class="logo">
          
          </div>
          <div class="user-info">
            <span class="welcome-text" style="font-size: 25px;">欢迎您！{{pinia.account.UserName}}</span>
            <el-button type="danger" @click="loginout"  round>退出</el-button>
          </div>
        </div>
      </el-header>
      
      <el-container>
        <!-- 侧边菜单 -->
        <el-aside :width="isCollapse ? '64px' : '220px'" class="sidebar">
          <div class="logo-container" @click="isCollapse = !isCollapse">
            <el-icon v-if="isCollapse" size="24"><i-ep-menu /></el-icon>
            <span v-else>导航菜单</span>
          </div>
          
          <el-menu
            :default-active="$route.path"
            :collapse="isCollapse"
            background-color="#c5dbfa"
            text-color="#4f3d40"
            active-text-color="#775c60"
            router
            class="sidebar-menu"
          >
            <el-sub-menu 
              v-for="(item, index) in url" 
              :key="index" 
              :index="item.path || index.toString()"
            >
              <template #title>
                <el-icon><i-ep-menu /></el-icon>
                <span>{{ item.label }}</span>
              </template>
              
              <el-menu-item 
                v-for="(child, childIndex) in item.children" 
                :key="childIndex" 
                :index="child.path || `${index}-${childIndex}`"
              >
                <el-icon><i-ep-document /></el-icon>
                <span>{{ child.label }}</span>
              </el-menu-item>
            </el-sub-menu>

            <el-menu-item v-if="pinia.account.rid.length === 0" index="/showapp">
              <el-icon><i-ep-tickets /></el-icon>
              <span>请假申请</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        
        <!-- 主内容区域 -->
        <el-main class="main-view">
          <div class="content-wrapper">
            <RouterView />
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.app-container {
  height: 100vh;
  background-color: #f5f7fa;
}

/* 顶部导航样式 */
.main-header {
  background: linear-gradient(135deg, #d4c7f8, #a18cd1);
  color: white;
  height: 60px;
  display: flex;
  align-items: center;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 0 20px;
  margin: 0 10px;
  margin-top: 5px;
}

.header-content {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 20px;
  font-weight: bold;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.welcome-text {
  font-size: 16px;
}

/* 侧边栏样式 */
.sidebar {
  transition: width 0.3s;
  background-color: #c5dbfa;
  border-radius: 12px;
  box-shadow: 4px 0 12px rgba(0, 0, 0, 0.08);
  margin: 10px;
  height: calc(100vh - 80px);
}

.logo-container {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: bold;
  color: #4f3d40;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.sidebar-menu {
  border-right: none;
  border-radius: 12px;
}

.sidebar-menu:not(.el-menu--collapse) {
  width: 100%;
}

.el-menu-item, .el-sub-menu__title {
  transition: all 0.3s;
}

.el-menu-item:hover, .el-sub-menu__title:hover {
  background-color: rgba(255, 255, 255, 0.5) !important;
}

/* 主内容区域 */
.main-view {
  padding: 20px;
  background-color: transparent;
}

.content-wrapper {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  height: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 图标样式 */
.el-icon {
  margin-right: 8px;
  font-size: 18px;
}
</style>